<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 11:31:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 12:00:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div{
            width: 500px;
            height: 500px;
            background-color: orange;
        }

    </style>
</head>
<body>
    <div></div>
    <script>
        // 事件 
        // 目的捕捉用户的行为 
        // 根据用户的行为 进行一些操作  


        // 事件三要素: 

        // 事件源 =＞　绑定在谁身上　
        // 事件类型 => 什么事件 load click change
        // 事件处理函数 => 触发这个时间后,执行的函数  



        // 事件的绑定方式

        // dom0  dom1 dom2 dom3 
        // 1 事件源.on事件类型 = 事件处理函数
        // DOM 0级 
        // 同一个事件源的同一个事件类型只能绑定一个事件处理函数
        // 等同于同一个文件 函数名重复 
        // 后边的会把前面替换掉   

        // 同一个事件源可以绑定多个不同的事件类型


        // 2. 事件监听器 
        // DOM 2级 

        /// 同一个事件源的同一个事件类型可以绑定多个事件处理函数
        // 顺序执行  

        // w3c浏览器  edge chrome Firefox Safari opera 
        //事件源.addEventListener('事件类型',事件处理函数);
        
        // ie浏览器 及低版本  
        //事件源.addEventListener('on事件类型',事件处理函数); 
        var divEle = document.querySelector('div');
        // divEle.onclick = function(){
        //     console.log('6666')
        // }

        // // divEle.onclick = function(){
        // //     console.log('8888')
        // // }

        // divEle.onmouseout = function(){
        //     console.log('7777')
        // }

        // divEle.addEventListener('click',function(){
        //     alert(666);
        // });
        // divEle.addEventListener('click',function(){
        //     alert(888);
        // });
            
        // alert(window.navigator.userAgent); // 浏览器名称
        if(window.navigator.userAgent.indexOf('Chrome')>0 || window.navigator.userAgent.indexOf('Safari')>0 ){

            divEle.addEventListener('click',function(){
                alert(666);
            });
        }else{
            divEle.addEventListener('onclick',function(){
                alert(666);
            });
        }

    </script>
</body>
</html>